<template>
  <div>
    <!-- <DragPreviewImage v-if="element.previewImage" :connect="previewRef" :src="element.previewImage" /> -->
    <div class="colStart cItem mt-4" :ref="drag">
      <div class="svgClass rowCenter">
        <DIcon :icon="element.icon" size="80" />
      </div>
      <div class="dQaNpO">{{ element.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type { TypeWidgetPanelElement } from "@/types/TypeDesign";
import { useDrag, DragPreviewImage } from "vue3-dnd";
import type { DragSourceMonitor } from "vue3-dnd";
import { ref, defineComponent, inject, computed, unref } from "vue";
import { designEditKey } from "@/hooks/lowcode/keys";
import type { TypeDesignProvide } from "@/types/TypeDesign";

export type DropResultFromType = "designer" | ""; //组件类型

const props = defineProps({
  element: {
    type: Object as PropType<TypeWidgetPanelElement>,
    default: () => {},
  },
});

let { designWidgetList, setDesignSelectWidget } = inject(designEditKey) as TypeDesignProvide;

const [collect, drag, previewRef] = useDrag(() => ({
  type: "component",
  item: () => props.element,
  end: (item, monitor: DragSourceMonitor) => {
    // if (monitor.didDrop()) { //拖拽结束后
    //   let dropResult: DropResultObj = monitor.getDropResult() as DropResultObj;
    //   if (dropResult.from === "designer") {
    //     delete dropResult["dropEffect"];
    //     var newOrigin = deepClone(item);
    //     newOrigin.id = generateId();
    //     let _widget = Object.assign(newOrigin, deepClone(CmpConfig[newOrigin.component]), dropResult);
    //     designWidgetList.value.push(_widget);
    //     setDesignSelectWidget(_widget);
    //   }
    // }
  },
  collect: (monitor) => ({
    isDragging: monitor.isDragging(),
    handlerId: monitor.getHandlerId(),
  }),
}));
</script>

<style scoped lang="scss">
.svgClass {
  height: 120px;
  width: 120px;
  // padding: 6px;

  background: rgb(255, 255, 255);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(215, 217, 224);
  border-image: initial;
  border-radius: 4px;
  transition: all 0.2s ease-in-out 0s;
}

.svgClass:hover {
  transform: scale(1.05);
  transition: all 0.2s ease 0s;
  border: 1px solid rgb(179, 196, 255);
  box-shadow: rgb(51 119 255 / 15%) 0px 0px 5px 0px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.dQaNpO {
  user-select: none;
  font-size: 14px;
  display: table;
  margin-top: 10px;
  color: rgb(51, 51, 51);
  text-align: center;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
  padding: 0px;
}
</style>
